<template>
  <div>
    <wsSearch @getSearch="getSearch" @getReset="getReset">
      <template #custom>
        <el-row :gutter="20">
          <!-- 如需自定义类似 -->
          <el-col :span="6">
            <el-input v-model="query.test" placeholder="请输入用户名" />
          </el-col>
          <el-col :span="6">2222</el-col>
          <el-col :span="6">3333</el-col>
          <el-col :span="6">4444</el-col>
        </el-row>
      </template>
    </wsSearch>
    <!-- 表格 -->
    <!-- :show-overflow-tooltip="true" 单独加在字段里也可以弹出框 -->
    <div class="ws-my-table mt-4">
      <el-table :data="data" style="width: 100%" border v-loading="loading" highlight-current-row
        :row-class-name="tableRowClassName" :show-summary="true" :summary-method="getSummaries"
        :show-overflow-tooltip="true">
        <el-table-column prop="date" label="date" width="180" />
        <el-table-column prop="name" label="name" width="180" />
        <el-table-column prop="address" label="address">
          <!-- 自定义表头 -->
          <template #header>
            <div class="flex">
              <div>address</div>
              <div style="margin-left: auto">
                <!-- <i class="iconfont icon-sousuo"></i> -->
                <el-popover :visible="popVisible" placement="right" :width="400" trigger="click" :placement="bottom">
                  <template #reference>
                    <i class="iconfont icon-sousuo" @click="popClick"></i>
                  </template>
                  <div>
                    <el-input v-model="tableSearch"></el-input>
                    <div style="margin: 10px 0 0; display: flex">
                      <div style="margin-left: auto">
                        <el-button size="small" @click="popVisible = false">取消</el-button>
                        <el-button type="primary" size="small">确定</el-button>
                      </div>
                    </div>
                  </div>
                </el-popover>
              </div>
            </div>
            <!-- <el-input v-model="tableSearch" size="small" placeholder="Type to search" @input="tableInput" /> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination flex mt-2">
      <div class="ml-auto">
        <!-- v-model + pageSize和pageNo -->
        <el-pagination layout="prev, pager, next" v-model:current-page="query.pageNo" v-model:page-size="query.pageSize"
          :total="total" @change="pagChange" />
      </div>
    </div>
    <!-- 表格内固定 iview方式 -->
    <!-- <div class="table3">
      <Table :columns="columns" :data="data" size="small"></Table>
    </div> -->
  </div>
</template>
<script setup lang="ts">
/* 注册组件 */
import wsSearch from "@/components/wangs/ws-search.vue";
import { ref } from "vue";
import { http } from "@/utils/http";
import { ElMessage } from "element-plus";



/* iview 会影响到elementui样式 所以局部引入 当前页面也得用iview的表格 */
// import 'view-ui-plus/dist/styles/viewuiplus.css'

/* 定义query */
/* 如需自定义类似 */
const query = ref<any>({
  pageNo: 1,
  pageSize: 2,
});
/* 表格总条数 */
let total = ref<any>(0);
/* 加载 */
const loading = ref(false);

/* 分页器变化 */
const pagChange = async (e, k) => {
  query.value.pageNo = e;
  query.value.pageSize = k;
  await init();
};

const tableSearch = ref("");

const popVisible = ref(false);

const popClick = () => {
  popVisible.value = true;
};

/* 初始化 */
const init = async () => {
  await http
    .request("get", "/test/getWangsTable", { params: query.value })
    .then((res) => {
      loading.value = true;
      if (res.code == 200) {
        data.value = res.data.data;
        total.value = res.data.total;
        loading.value = false;
        return;
      }
      ElMessage.error(res.msg);
    });
};
init();

/* 每行换色 */

interface User {
  date: string;
  name: string;
  address: string;
}

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User;
  rowIndex: number;
}) => {
  /* 偶数变色 */
  if (rowIndex % 2 == 0) {
    return "warning-row";
  } else {
    return "";
  }
};

/* 获取自定义信息 */
const getSearch = (e: any) => {
  query.value = Object.assign(query.value, e);
  init();
};
const getReset = (e: any) => {
  query.value = {
    pageNo: 1,
    pageSize: 2,
  };
  query.value = Object.assign(query.value, e);
  init();
};

/* 表格 */
const data = ref<any>([
  {
    id: "123456",
    username: "wangchacha",
    name: "王xx",
    date: "2025-06-15",
    address: "北京二环",
  },
  {
    id: "234568",
    username: "lichacha",
    name: "李xx",
    date: "2025-06-16",
    address: "北京西城区",
  },
]);


/* 数据 */
const xData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
]

//表尾添加一行
const getSummaries = (params) => {
  const { columns, data } = params;
  const sums = [];
  columns.forEach((ele, index) => {
    switch (index) {
      case 0:
        return (sums[index] = "总计");
      /* 总计这里后台返回的数据显示到这里 */
      case 2:
        return (sums[index] = "333333");
    }
  });
  return sums;
}
</script>

<style  scoped>
.table2 {
  margin: 10px auto;
}

.ml-auto {
  margin-left: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

.ws-my-table {
  margin: 10px 0 0;
}

/* 表格换色 */
 .ws-my-table>>>.el-table .warning-row {
   --el-table-tr-bg-color: var(--el-color-warning-light-9);
 }

 .ws-my-table>>>.el-table .success-row {
   --el-table-tr-bg-color: var(--el-color-success-light-9);
 }

 .el-popper.is-light.el-tooltip.el-popover {
   width: 200px !important;
 }




</style>